<template>
	<div class="winingDetail" v-if='winingMess'>
		<x-header title="中奖详情" :left-options="{backText:''}" class="whiteHeader"></x-header>
		<div class="shopMess" @click='goShopDetail'>
			<img :src="winingMess.SERVDETAIL_PHOTO" alt='' />
			<div class="shopDetailMess">
				<h1>{{winingMess.SERV_DETAIL_NAME}}</h1>
				<div class="price">
					<span>￥<label>{{winingMess.GROUPONGOODS_PRICE}}</label></span>
					<s>￥{{winingMess.SERVDETAIL_PRICE}}</s>
				</div>
			</div>
		</div>
		<div class="winingClass">
			<div class="twoPrize classStyle" v-if='winingMess.PRIZE_LEVEL==2'>
				<h1>恭喜你，获得二等奖</h1>
				<p>共计获得{{winingMess.PRIZE_NAME}}</p>
				<div class="btns" @click='goVoucher'>查看代金券</div>
			</div>
			<div class="onePrize classStyle" v-if='winingMess.PRIZE_LEVEL==1'>
				<h1>恭喜你，获得一等奖</h1>
				<p>获得{{winingMess.PRIZE_NAME}}</p>
				<div class="pirzeType">中奖奖品将会在1~3个工作日内发货！</div>
			</div>
		</div>
	    <div class="prizeList">
	    	<div class="commentHead listHead1"></div>
	    	<div class="allList">
	    		<table>
	    			<thead>
	    				<tr>
	    					<th>幸运儿</th>
	    					<th>订单号</th>
	    					<th>电话</th>
	    				</tr>
	    			</thead>
	    			<tbody>
	    				<tr v-for='item in winingMess.PRIZE_LIST'>
	    					<td>
	    						<img :src="item.SPATH" alt="" />
	    					</td>
	    					<td>
	    						{{item.ORDER_NO | filterOrderNo}}
	    					</td>
	    					<td>
	    						{{item.PHONE | fiterPhone}}
	    					</td>
	    				</tr>
	    			</tbody>
	    		</table>
	    	</div>
	    </div>
	</div>
</template>
<script>
/*中奖详情*/
import { XHeader } from 'vux';
import { setCookie, getCookie,pushStateUrl } from '../../util/commonUtils';
export default {
	name: "gPrizeDetail",
	// 数据
	data() {

		return {
			userId: '',
			orderId:'',
			winingMess:''  //中奖信息
		}
	},
	// 计算属性
	computed: {

	},
	// 创建（实例创建完成）
	created() {
		this.userId = getCookie('loginkey');
		this.orderId=this.$route.params.id;
		pushStateUrl();
		if(this.userId){
			this.getWiningDetail();
		}
	},
	// el被创建，并挂载到实例上
	mounted() {

	},
	// 方法（实例中的方法）-----------
	methods: {
		//获取用户所有的代金券
        getWiningDetail(){
            this.$fetchPost('/Groupon/getGrouponPrizeResult.action',{
              USER_ID:this.userId,
              SERV_ORDER_ID:this.orderId
            }).then(res=>{
              if(res.STATUS_CODE==1){
                this.winingMess=res;
              }
            },err=>{
              console.log(err);
            })
        },
        goShopDetail(){
        	this.$router.push('/shopDetail/'+this.winingMess.SERVDETAIL_ID);
        },
        goVoucher(){
        	this.$router.push('/ticket');
        }
	},
	// 子组件
	components: {
		XHeader
	}
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.winingDetail{
	height: 100%;
	min-height: 100%;
	background: #fff;
	.shopMess{
		width: 7.5rem;
		height: 2.2rem;
		background: #fff url(../../assets/image/groupPurchase/openPrize.png) 5.8rem 0.3rem no-repeat;
		background-size: 1.34rem 1.32rem;
		display: flex;
		img{
			width: 1.7rem;
			height: 1.5rem;
			display: block;
			margin: 0.3rem 0 0 0.4rem;
		}
		.shopDetailMess{
			padding:0.4rem 0.15rem 0.4rem 0.2rem;
			position: relative;
			h1{
				color: #000;
				font-size:0.3rem;
				display: -webkit-box;
			    -webkit-box-orient: vertical;
			    -webkit-line-clamp: 2;
			    overflow: hidden;
			    width: 5rem;
			    text-align: left;
			}
			.price{
				display: flex;
				position: absolute;
				bottom: 0.4rem;
				align-items:baseline;
				span{
					font-size: 0.24rem;
					color: #ec2121;
					label{
						font-size: 0.3rem;
					}
				}
				s{
					font-size: 0.24rem;
					color: #666;
					padding-left: 0.15rem;
				}
			}
		}
	}
	.winingClass{
		width: 7.5rem;
		height: 3.2rem;
		border:0.2rem solid #efeff4;
		border-width: 0.2rem 0;
		background: #fff;
		.classStyle{
			h1{
				color: #222;
				font-size: 0.36rem;
				padding: 0.45rem 0 0.15rem 0;
			}
			p{
				font-size: 0.28rem;
				color: #999;
				padding: 0 0.3rem;
			}
			.btns{
				width: 3.6rem;
				height: 0.7rem;
				margin: 0.3rem auto 0;
				background: #EF4242;
				color: #fff;
				line-height: 0.7rem;
				font-size: 0.3rem;
				border-radius: 0.35rem;
			}
			.pirzeType{
				font-size: 0.26rem;
				color: #FF8C05;
				margin-top: 0.5rem;
			}
		}
	}
	.prizeList{
		background: #fff;
		width: 6.98rem;
		padding: 0.3rem 0 0 0;
		margin: 0 auto;

		.commentHead{
			position: relative;
			z-index: 501;
			width: 6.98rem;
			height: 0.66rem;
			margin:0 auto;
		}
		.listHead1{
			background: url(../../assets/image/groupPurchase/prize1.png) no-repeat;
			background-size: 6.98rem 0.66rem;

		}
		.allList{
			width: 6.5rem;
			min-height: 5rem;
			margin: -0.25rem auto 0;
			border:0.04rem solid #F69F57;
			border-radius: 0.1rem;
			position: relative;
			z-index: 500;
			padding-top: 0.45rem;
			box-shadow: 5px 5px 15px rgba(0,0,0,.03),-5px 5px 15px rgba(0,0,0,.03),5px -5px 15px rgba(0,0,0,.03),-5px -5px 15px rgba(0,0,0,.03);
			table{
				width: 100%;
			}
			td{
				font-size: 0.2rem;
				text-align: center;
				img{
					width: 0.54rem;
					height: 0.54rem;
					border-radius: 50%;
				}
			}
			th{
				font-size: 0.28rem;
				color: #222;
				text-align: center;
			}
		}
	}
	
}
</style>